<template>
    <div>
        
        
        <div style="margin: 10px 0;">
            <el-button type="primary" @click="add">发布公告<i class="el-icon-circle-plus-outline"></i></el-button>
            
            
        </div>
        <el-table :data="tableData" border stripe >
            
            <el-table-column prop="nid" label="公告ID" width="80">
            </el-table-column>
            <el-table-column prop="userid" label="发布人ID" width="120">
            </el-table-column>
            <el-table-column prop="ntitle" label="标题" width="120">
            </el-table-column>
            <el-table-column prop="ncontext" label="内容" width="140">
            </el-table-column>
            <el-table-column  label="配图" width="180">
                <template  slot-scope="scope">
                    <img :src="scope.row.image" alt="配图" width="120" height="120">
                </template>
            </el-table-column>
            <el-table-column label="操作">
                <template slot-scope="scope">
                    <el-popconfirm style="margin-left: 5px;" confirm-button-text='确定' cancel-button-text='取消'
                        icon="el-icon-info" icon-color="red" title="您确定删除吗？" @confirm="del(scope.row.nid)">
                        <el-button type="danger" slot="reference">删除<i class="el-icon-remove-outline"></i></el-button>
                    </el-popconfirm>
                </template>
            </el-table-column>
        </el-table>
        <div style="padding: 10px 0;">
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="pageNum"
                :page-sizes="[5, 10, 15]" :page-size="10" layout="total, sizes, prev, pager, next, jumper" :total="total">
            </el-pagination>
        </div>
        <el-dialog title="用户信息" :visible.sync="dialogFormVisible" width="30%">

            <el-form label-width="70px">

                <el-form-item label="发布人ID">
                    <el-input v-model="uinfo.userid" autocomplete="off" disabled="true"></el-input>
                </el-form-item>
                <el-form-item label="标题">
                    <el-input v-model="form.ntitle" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item label="内容">
                    <el-input v-model="form.ncontext" autocomplete="off"></el-input>
                </el-form-item>
                <el-form-item prop="image" label="配图" v-model="form.image">
                <el-upload
                action=""
                list-type="picture-card"
                :auto-upload="false"
                :limit="Number(1)"
                :http-request="myUpload"
                ref="upload1"
                :file-list="imgfile"
                :on-success="imgSuccess"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove">
                <i class="el-icon-plus"></i>
                </el-upload>
                <el-dialog :visible.sync="dialogVisible">
                <img width="100%" :src="dialogImageUrl" alt="">
                </el-dialog>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="quit">取 消</el-button>
                <el-button type="primary" @click="submitUpload(1)">确 定</el-button>
            </div>
        </el-dialog>
    </div>
</template>
<script>
import axios from 'axios';

export default {
    name: "User",
    props: {

    },
    data() {
        return {
            typ:0,
            u_name: '',
            pageNum: 1,
            pageSize: 10,
            total: 0,
            tableData: [],
            form: {},
            formX: {},
            collapseBtnClass: 'el-icon-s-fold',
            isCollapse: false,
            sideWidth: 200,
            logoTextShow: true,
            dialogFormVisible: false,
            multipleSelection: [],
            deleteIds: [],
            n: 0,
            dialogImageUrl: '',
            dialogVisible: false,
            imgfile:[],
            uinfo:''
        }
    },
    created() {
        this.load();
        this.uinfo=JSON.parse(sessionStorage.getItem("loginUser"));
    },
    methods: {
        handleExcelImportSuccess() {
            this.$message.success("文件导入成功");
            this.load();
        },
        exp() {
            window.open("http://localhost:8080/user/export")
        },
        quit() {
            this.dialogFormVisible = false;
            this.load();
        },
        deleteData() {
            this.$confirm('您确定删除吗', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning',
                center: true
            }).then(() => {
                console.log(this.deleteIds);
                var p=new URLSearchParams();
                p.append("userid",this.deleteIds);
                axios({
                    
                    url:"http://localhost:8080/user/delBatch",
                    method:"delete",
                    params:p
                }).then(obj=>{
                    if(obj.data){
                        this.$message.success("删除成功");
                        this.load();
                    }else{
                        this.$message.error("删除失败");
                    }
                })
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消'
                });
                this.load();
            });
        },
        handleSelectionChange(dataList) {
            this.deleteIds = [];
            dataList.forEach(item => {
                this.deleteIds.push(item.userid)
            })
            console.log(this.deleteIds);
        },
        del(id) {
            var p=new URLSearchParams();
            p.append("nid",id);
            axios({
                url:"http://localhost:8080/notice/delNotice",
                method:"delete",
                params:p
            }).then(obj=>{
                if(obj.data){
                    this.$message.success("删除成功");
                    this.quit();
                    this.load();
                }else{
                    this.$message.error("删除失败");
                }
            });
        },
        edit(row) {
            this.imgfile=[];
            console.log(row);
            this.form = row;
            console.log(this.form.username);
            this.imgfile.push({name:"123.jpg", url:row.avatar});
            this.dialogFormVisible = true;
        },
        save() {
            // var t=new URLSearchParams();
            // t.append("userid",this.form.userid);
            var param=new URLSearchParams();
            param.append("userid",this.uinfo.userid);
            param.append("ntitle",this.form.ntitle);
            param.append("ncontext",this.form.ncontext);
            param.append("image",this.dialogImageUrl);
            var t=new URLSearchParams();
            t.append("userid",this.uinfo.userid);
            t.append("ntitle",this.form.ntitle);
            t.append("image",this.dialogImageUrl);
            t.append("ncontext",this.form.ncontext);
            
            
            if(this.typ==0){
                axios({
                    url:"http://localhost:8080/user/updateUser",
                    method:"put",
                    data:param
                }).then(obj => {
                    if(obj.data){
                        this.$message.success("修改成功");
                        this.quit();
                        this.load();
                        
                    }else{
                        this.$message.error("修改失败");
                    }
                })
            }else{
                axios({
                    url:"http://localhost:8080/notice/addNotice",
                    method:"post",
                    data:t
                }).then(obj=>{
                    if(obj.data){
                        this.$message.success("新增成功");
                        this.quit();
                        this.load();
                    }else{
                        this.$message.error("新增失败");
                    }
                });
                this.typ=0;
            }
            
            
        },
        add() {
            this.imgfile=[];
            this.dialogFormVisible = true;
            this.typ=1;
            this.form = {};
        },
        reset() {
            this.u_name = '';
            this.load();
        },
        load() {
            var param=new URLSearchParams();
            param.append("page",this.pageNum);
            param.append("size",this.pageSize);
            
            axios({
                url:"http://localhost:8080/notice/getNoticePage",
                method:"get",
                params:param

            }).then(obj => {
                this.tableData=obj.data.records;
                this.total=obj.data.total;
            })
                
        },
        
        handleSizeChange(pageSize) {
            
            this.pageSize = pageSize;
            this.load();
        },


        handleCurrentChange(pageNum) {
            
            this.pageNum = pageNum;
            this.load();
        },
        imgSuccess(res, file) {
      this.dialogImageUrl=res.data;
      this.form.image=this.dialogImageUrl;
      
      //这里我是用一个fileList数组存取，当保存的时候进行图片路径处理
    },

      handleRemove(file, fileList) {
        console.log(file, fileList);
      },
      handlePictureCardPreview(file) {
        this.dialogImageUrl = file.url;
        this.dialogVisible = true;
      },
      submitUpload(value){
        if(value==1){
            this.$refs["upload1"].submit();
        }
      },
      myUpload(content){
        var param=new FormData();
        param.append("uploadFile",content.file);
        axios({
            url:"http://localhost:8080/user/upload",
            method:"post",
            data:param
        }).then(obj=>{
            this.$message.success(obj.data.message);
            if(obj.data.status==1){
                
                this.dialogImageUrl=obj.data.data;
                console.log(this.dialogImageUrl);

                this.save();
                this.clearFiles();
            }
        })
      },
      
    clearFiles () {
      this.$refs['upload1'].clearFiles();
    }
    }
}
</script>